<template>
  <el-skeleton
    v-if="loading && !organization"
    :rows="6"
    animated
    class="mt-4"
  />
  <el-empty v-else-if="!organization" description="请选择组织" />
  <el-descriptions
    v-else
    :column="1"
    border
    size="small"
    label-class-name="w-32"
    class="org-profile"
  >
    <el-descriptions-item label="组织名称">
      {{ organization.name }}
    </el-descriptions-item>
    <el-descriptions-item label="组织类型">
      {{ organization.org_type_label || organization.org_type || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="所属区域">
      {{ organization.region_label || organization.region?.name || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="仓库编码">
      {{ organization.warehouse_code || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="联系人">
      {{ organization.contact?.contact_name || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="联系方式">
      {{ organization.contact?.contact_phone || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="邀请人">
      {{ organization.inviter_name || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">
      {{ organization.create_time || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="审核时间">
      {{ organization.approved_at || "-" }}
    </el-descriptions-item>
    <el-descriptions-item label="备注">
      {{ organization.extra?.remark || organization.remark || "-" }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import type { OrganizationListItem } from "@/api/system/org/organization";

defineProps<{
  organization: OrganizationListItem | null;
  loading: boolean;
}>();
</script>

<style scoped>
.org-profile {
  width: 100%;
}
</style>
